{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-2">目标主机<span class="red">&nbsp;*&nbsp;</span>:</label>
                            <div class="col-md-10">
                                <button id="btn_chosen" type="button" class="btn btn-success"><i
                                        class="fa fa-desktop"></i>&nbsp;选择服务器
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10">
                                <input id="tgt" name="tgt" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">远程命令<span class="red">&nbsp;*&nbsp;</span>:</label>
                            <div class="col-md-10">
                                <input id="arg" name="arg" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <button id="btn_exec" class="btn btn-success pull-right">
                                    <i class="fa fa-life-saver"></i> 执行
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-2">返回结果</label>
                            <div class="col-md-10">
                                <textarea id="ret" rows="15" name="ret" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block self_footer_js %}
    <script>
        $(function () {
            // add button
            $("#btn_chosen").click(function () {
                var addDialog = new BootstrapDialog({
                    title: "选择目标机器",
                    closable: false,
                    draggable: true,
                    message: $('<div></div>').load("{% url 'chosen_server' %}"),
                    buttons: [{
                        cssClass: "btn-default",
                        label: "保存",
                        action: function (dialogItself) {
                            $("#tgt").val($("#test").text());
                            dialogItself.close();
                            addDialog.close();
                        }
                    }, {
                        cssClass: 'btn-white',
                        label: "取消",
                        action: function (dialogItself) {
                            dialogItself.close();
                        }
                    }]
                });
                addDialog.open();
            });

            $('#btn_exec').click(function () {
                tgt = $('#tgt').val();
                arg = $('#arg').val();
                $("#btn_exec").html('<i class="fa fa-spin fa-refresh"></i> 执行中...');
                $.ajax({
                    url: "{% url 'remote_exec' %}?action=exec",
                    type: 'POST',
                    data: {tgt: tgt, arg: arg},
                    //url返回的值
                    success: function (data) {
                        // var obj = jQuery.parseJSON(data);
                        // console.log(data)
                        $('#ret').val(data.ret);
                        $("#btn_exec").html('<i class="fa fa-plus"></i> 执行');

                    },
                    error: function () {
                        console.log('failed')
                    }
                });
            });

        });
    </script>
{% endblock %}